<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 
        需求1：定义一个v-big指令，和v-text功能类型类似，但是把绑定的数值放大10倍
        需求2；定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。

        自定义指令总结：
            1、定义语法：
                (1)定义语法：
                    new Vue({                                     new Vue({
                        directives{                                   directives{ 
                            指令名:配置对象           或                    指令名:回调函数
                        big:function(element,binding){}                    fbind:{bind(element,binding){},inserted(element,binding){},update(element,binding){}}
                        可简写big(element,binding)}                      }
                    })                                            })

                (2)全局指令
                    Vue.directive(指令名，配置对象)  或者   Vue.directive(指令名，回调函数) 
            2、配置对象中常用的3个回调
                    (1)bind:指令与元素成功绑定时调用
                    (2)inserted:指令所在元素被插入页面时
                    (3)update:指令所在的模板被重新解析时

            3、备注
                (1)指令定义时不叫v-,但是使用时要加v-
                (2)指令使用多个单词时，要使用短横线(kebab-case)命名方式,不用驼峰式(canelCase)命名
     -->
    <div id="root">
        <h2>当前的n值是: <span v-text='n'></span></h2>
        <!-- <h2>放大10倍的n值是 <span v-big-number='n'></span></h2> -->
        <h2>放大10倍的n值是 <span v-big='n'></span></h2>
        <button @click='n++'>点我n+1</button>
        <hr>
        <input type="text" v-fbind:value='n'>
    </div>
    <div id="root2">
        <input type="text" v-fbind:value='x'>
    </div>

    <!-- 引入Vue -->
    <script src="../js/vue.js"></script>
    <script>
        Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

        // ----定义全值指令
        // Vue.directive('fbind',{
        //     // 指令与元素成功绑定时(一上来)
        //     bind(element,binding){
        //         console.log('bind')
        //         console.log('fbind-bind',this)//以下三个函数的this是window
        //         element.value = binding.value;
        //     },
        //     //指令所在元素被插入页面时
        //     inserted(element,binding){
        //         console.log('inserted')
        //         element.focus()
        //     },
        //     // 指令所在的模板被重新解析时
        //     update(element,binding){
        //         element.value = binding.value;
        //     },
        // })

        new Vue({
            el:'#root',
            data:{
                n:1
            },
            directives:{
                // big函数何时被调用？1、指令与元素成功绑定时 2、指令所在的模板被重新解析时
                // 'big-number'(element,binding){
                //     element.innerText = binding.value*10
                // },
                big:function(element,binding){
                    // console.log(binding)
                    element.innerText = binding.value*10
                },
                fbind:{
                    // 指令与元素成功绑定时(一上来)
                    bind(element,binding){
                        console.log('bind')
                        console.log('fbind-bind',this)//以下三个函数的this是window
                        element.value = binding.value;
                    },
                    //指令所在元素被插入页面时
                    inserted(element,binding){
                        console.log('inserted')
                        element.focus()
                    },
                    // 指令所在的模板被重新解析时
                    update(element,binding){
                        element.value = binding.value;
                    },
                }
            }
        })
        // new Vue({
        //     el:'#root2',
        //     data:{
        //         x:1,
        //     }
        // })
    </script>
</body>
</html>